<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('修改商品信息')"/>
    <th:block th:include="include :: select2-css"/>
    <th:block th:include="include :: bootstrap-select-css"/>
    <th:block th:include="include :: jasny-bootstrap-css"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-product-edit" th:object="${hhProduct}">
        <input name="productId" th:field="*{productId}" type="hidden">
        <div class="form-group" >
            <label class="col-sm-3 control-label">类型：</label>
            <div class="col-sm-8">
                <label th:text="*{productType}"></label>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">商品名：</label>
            <div class="col-sm-8">
                <input name="productName" th:field="*{productName}" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group" id="brandId">
            <label class="col-sm-3 control-label">商品品牌：</label>
            <div class="col-sm-8">
                <select name="brandId" class="brandId form-control"></select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">单价：</label>
            <div class="col-sm-8">
                <input name="productPrice" th:field="*{productPrice}" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">单位：</label>
            <div class="col-sm-8">
                <input name="productUnit" class="form-control" type="text" th:field="*{productUnit}">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">商品图片：</label>
            <div class="col-sm-8 fileinput fileinput-new" data-provides="fileinput">
                <div class="fileinput-new thumbnail" style="width: 140px; height: 140px;">
                    <img th:src="*{productImg}">
                </div>
                <div class="fileinput-preview fileinput-exists thumbnail"
                     style="max-width: 200px; max-height: 150px;"></div>
                <div>
                        <span class="btn btn-white btn-file">
                            <span class="fileinput-new">选择图片</span><span class="fileinput-exists">更改</span>
                            <input type="file" name="imageFile" id="imageFile">
                            <input name="productImg" type="hidden" id="productImg">
                        </span>
                    <a href="#" class="btn btn-white fileinput-exists" data-dismiss="fileinput">清除</a>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">备注：</label>
            <div class="col-sm-8">
                <textarea name="remark" class="form-control">[[*{remark}]]</textarea>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">编号：</label>
            <div class="col-sm-8">
                <input name="purchasePrice" th:field="*{purchasePrice}" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">库存：</label>
            <div class="col-sm-8">
                <input name="productStore" th:field="*{productStore}" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">简称：</label>
            <div class="col-sm-8">
                <input name="productShortName" th:field="*{productShortName}" class="form-control" type="text">
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: select2-js"/>
<th:block th:include="include :: jquery-cxselect-js"/>
<th:block th:include="include :: bootstrap-select-js"/>
<th:block th:include="include :: jasny-bootstrap-js"/>
<th:block th:include="include :: image-compressor-js"/>
<script th:inline="javascript">
    var prefix = ctx + "baseInfo/product";
    $("#form-product-edit").validate({
        focusCleanup: true
    });

    $('#imageFile').change(function(e){
        vm.compressImage(e.target.files[0]);
    })

    function submitHandler() {
        if ($.validate.form()) {
            if (null == vm.outputFile){
                $.operate.save(prefix + "/edit", $('#form-product-edit').serialize());
            }
            else {
                var data = new FormData();
                data.append("imageFile",vm.outputFile,vm.imgName);
                $.ajax({
                    type: 'post',
                    url: prefix + "/uploadImage",
                    cache: false,    //上传文件不需缓存
                    processData: false, //需设置为false。因为data值是FormData对象，不需要对数据做处理
                    contentType: false, //需设置为false。因为是FormData对象，且已经声明了属性enctype="multipart/form-data"
                    data: data,
                    dataType: 'json',
                    success: function (result) {
                        if (result.code == web_status.SUCCESS) {
                            $('#productImg').val(result.productImg);
                            $.operate.save(prefix + "/edit", $('#form-product-edit').serialize());
                        } else {
                            $.modal.alertError(result.msg);
                        }
                    },
                    error: function () {
                        $.modal.alertError('图片上传请求异常');
                    }
                })
            }
        }
    }

    //获取规格和品牌列表
    $(function () {
        var hhProduct = [[${hhProduct}]];
        $.ajax({
            type: "post",
            url: prefix + "/parentTypeChange",
            data: {
                "typeId": hhProduct.typeId
            },
            success: function (result) {
                if (result.code == 0) {
                    $('#brandId').cxSelect({
                        required: false,
                        firstTitle: '-',
                        selects: ['brandId'],
                        jsonName: 'name',
                        jsonValue: 'id',
                        data: result.data.brandList
                    });
                    $('#sizeId').cxSelect({
                        required: false,
                        firstTitle: '-',
                        selects: ['sizeId'],
                        jsonName: 'name',
                        jsonValue: 'id',
                        data: result.data.sizeList
                    });
                    $(".brandId").val(hhProduct.brandId).trigger("change");
                    $(".sizeId").val(hhProduct.sizeId).trigger("change");
                }
            }
        })
    });
</script>
</body>
</html>